<template>
  <div>
     <Wrap>
       <div slot="main_wrap">
         <div class="form-inline form-find ng-pristine ng-valid">
            <div class="form-group">
								<label>项目名称：</label>
						</div>
						<div class="form-group" style="min-width:200px">
              <!-- <avue-input-tree v-model="form2" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree> -->
              <el-select class="form-control " v-model="form1" :popper-append-to-body="false">
                  <el-option value="0" label="广东省税务局"><span>广东省税务局</span></el-option>
                </el-select>
            </div>
            <div class="form-group">
              <label>建筑：</label>
              <div class="form-group-control">
                <el-select class="form-control " v-model="form2" :popper-append-to-body="false">
                  <el-option value="0" label="潭村办公楼"><span>潭村办公楼</span></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-group">
              <a class="btn btn-primary btn-sm" role="button" ng-click="query()" @click="getData">刷新</a>
              <!-- <a class="btn btn-sm btn-primary" role="button" ng-click="go('platform.meterreadinglist')" access-field="goTable">仪表历史读数查询</a>
              <a class="btn btn-sm btn-primary" role="button" ng-click="go('platform.realtimereadingtable')" access-field="goMeterReadingList" style="display: none;">仪表实时读数监测</a>
              <a class="btn btn-sm btn-primary" role="button" ng-click="toHourlyEnergy()" access-field="goHourlyenergytrend">仪表实时监测</a> -->
            </div>
         </div>
         <ul class="nav nav-tabs" >
						<li :class="{active: active === index}" class="ng-isolate-scope" v-for="(item, index) in nowData" @click="changePage(index)">
              <a href="javascript:;" class="ng-binding">{{item.projectName}}</a>
            </li>
            <div style="clear:both"></div>
					</ul>
          <div class="outline-border">总共
            <a class="total-count ng-binding" ng-click="allMeters()">{{nowData[active] && nowData[active].total}}
            </a>个，其中异常
            <a ng-click="filterAbnormalMeters()" class="ng-binding">{{nowData[active] && nowData[active].faultCount}}</a>个，故障率<span class="abnormal-rate ng-binding">{{nowData[active] && nowData[active].faultRate}}%</span>
          </div>
          <div class="list-content">
            <div class="device-reading ng-scope" style="width: 19.7%;" ng-repeat="device in zbDetail track by device.indexs" v-for="item in nowData[active] && nowData[active].dataList">
              <ul>
                <li class="reading-row ng-binding" :title="item.meterName">
                  <span class="icon el-icon-circle-check" ng-show="device.networkStatus"></span>
                  <span class="icon  icon-button-close ng-hide" ng-show="!device.networkStatus"></span> {{item.meterName}}
                </li>
                <li class="reading-row">计量功能：
                  <span>{{item.meterParamName}}</span>
                </li>
                <li class="reading-row">最近读数：<span class="latest-reading ng-binding">{{item.reading.toFixed(2)}}</span>&nbsp;&nbsp;
                  <span>历史读数</span>
                </li>
                <li class="reading-row ng-binding">计量单位：{{item.unit}}</li>
                <li class="clearfix reading-time-row">
                  <div class="reading-time-label"><span>读数时间：</span></div>
                  <div class="reading-time ng-scope" ng-if="device.reading">
                    <div class="ng-binding">{{item.collectiontime}}</div>
                    <div class="reading-time-count ng-binding">约{{item.calcObj.days ? item.calcObj.days + '天': ''}}{{item.calcObj.hours ? item.calcObj.hours + '小时': ''}}{{item.calcObj.minutes ? item.calcObj.minutes + '分钟': ''}}前</div>
                  </div>
                </li>
                <li class="reading-row ng-binding">仪表编码：{{item.meterID}}</li>
                <li class="reading-row ng-binding">安装地点：{{item.installPath}}</li>
              </ul>
            </div>
          </div>
       </div>
     </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {calcDate} from '@/util/date'
import { meterCurrentRead } from '@/api/energy/energy'
export default {
  components: {
    Wrap
  },
  data () {
    return {
      form2:'0',
      form1: '0',
      active: 0,
      nowData: [],
      dic:[{
          label:'广东省税务局',
          value:0,
          // children:[{
          //    label:'选项3',
          //    value:2
          // },{
          //    label:'选项4',
          //    value:3
          // }]
        // },{
        //   label:'选项2',
        //   value:1
        }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    changePage(index) {
      this.active = index
    },
    getData() {
      meterCurrentRead().then(res => {
        res.data.data.map(item => {
          item.dataList.map(citem => {
            let calcTime = calcDate(new Date(citem.collectiontime).getTime(), new Date().getTime())
            citem.calcObj = calcTime
          })
        })
        this.nowData = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-find {
    padding: 20px;
    background-color: #081325;
    box-shadow: inset 0px 1px 13px 0px #1AABF3;
    border: solid 1px rgba(15, 80, 111, 0.55);
    margin-bottom: 10px;
   .form-group {
        margin-right: 3px;
        margin-bottom: 3px;
    }
}
.reading-row {
    line-height: 25px;
    margin-right: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #0a91ef;
    overflow: hidden;
    .el-icon-circle-check {
      color: green;
    }
    .icon {
        font-size: 23px;
        vertical-align: middle;
    }
}
.outline-border {
    border: 1px solid #ddd;
    color:#fff;
    padding: 5px;
    .total-count {
        color: #0371F7;
        text-decoration: underline;
        font-weight: bold;
    }
    .abnormal-rate {
        color: red;
        font-weight: bold;
    }
}
.list-content{
  height: calc(100vh - 260px);
  overflow-y: auto;
  margin-top: 10px;
  .device-reading {
    float: left;
  }
}
.form-inline label {
    margin-right: 7px;
}
.form-group-control {
    display: inline-block;
    vertical-align: middle;
}
.nav-tabs {
    margin-bottom: 15px;
    &>li.active,&>li:hover {
      background-color: transparent;
    }
    li>a {
        color: #fff;
        border: 1px solid rgb(27,74,131);
        -moz-box-shadow: 3px 0px 20px rgb(27,74,131) inset, 2px 2px 20px rgb(27,74,131) inset;
        -webkit-box-shadow: 3px 0px 20px rgb(27, 74, 131) inset, 2px 2px 20px rgb(27,74,131) inset;
        box-shadow: 3px 0px 20px rgb(27, 74, 131) inset, 2px 2px 20px rgb(27,74,131) inset;
    }
}
@media (min-width: 768px){
  .form-inline .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
  }
}
</style>
